<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            padding: 50px;
            font-size: medium;
        }

        .top {
            display: flex;
            justify-content: space-between;
            margin-bottom: 30px;
        }

        .topleft {
            display: flex;
        }

        .topright {
            border: none;
            height: 30px;
        }

        .long {
            height: 30px;
            width: 200px;
            padding: 0px 6px;
        }

        .green {
            background-color: rgb(90, 194, 90);
            height: 35px;
            width: 80px;
            border: none;
            margin-right: 8px;
        }

        .yellow {
            background-color: rgb(255, 196, 0);
            height: 35px;
            width: 80px;
            margin-right: 8px;
            border: none;
        }

        .red {
            background-color: rgb(175, 59, 59);
            height: 35px;
            width: 80px;
            margin-right: 8px;
            border: none;
        }

        table {
            border-collapse: collapse;
            width: 1350px;
        }

        th,
        td {
            border: solid 1px black;
        }

        .bottom {
            display: flex;
            justify-content: flex-end;
        }

        .a {
            text-decoration: unset;
            text-decoration-color: black;
        }

        .minileft {
            margin: 15px;
        }

        .minimid {
            margin: 15px;
        }

        a {
            color: #2b2b2b;
            text-decoration: none;
        }

        a:hover {
            color: cornflowerblue;
        }

        .miniright {
            margin: 15px;

        }
    </style>
</head>

<body>
    <div>
        <!-- 上面部分-->
        <div class="top">
            <!-- 左边部分 -->
            <div class="topleft">
                <input type="text" placeholder="线索名称/手机号码" class="long">
                <button class="short">搜索</button>
            </div>
            <!-- 右边部分 -->
            <div class="topright">
                <button class="green">新建线索</button>
                <button class="yellow">编辑</button>
                <button class="red">批量删除</button>
            </div>
        </div>
        <!-- 中间部分 -->
        <table>
            <thead>
                <tr>
                    <th><input type="checkbox"></th>
                    <th>线索名称</th>
                    <th>联系电话</th>
                    <th>地址</th>
                    <th>下次联系时间</th>
                </tr>
            <tbody>
                <tr>
                    <th><input type="checkbox"></th>
                    <th>xxxxxx</th>
                    <th>xxxxxx</th>
                    <th>xxxxxx</th>
                    <th>xxxxxx</th>
                </tr>
                <tr>
                    <th><input type="checkbox"></th>
                    <th>xxxxxx</th>
                    <th>xxxxxx</th>
                    <th>xxxxxx</th>
                    <th>xxxxxx</th>
                </tr>
                <tr>
                    <th><input type="checkbox"></th>
                    <th>xxxxxx</th>
                    <th>xxxxxx</th>
                    <th>xxxxxx</th>
                    <th>xxxxxx</th>
                </tr>
                <tr>
                    <th><input type="checkbox"></th>
                    <th>xxxxxx</th>
                    <th>xxxxxx</th>
                    <th>xxxxxx</th>
                    <th>xxxxxx</th>
                </tr>
            </tbody>
            </thead>
            <tbody>

            </tbody>
        </table>
    </div>
    <!-- 下面部分 -->
    <div class="bottom">
        <div class="minileft">共15条</div>
        <select class="minimid">
            <option value="0">每页三行</option>
            <option value="0">每页五行</option>
            <option value="0">每页十行</option>
        </select>
        <div class="miniright">
            <a href="#">&lt</a>
            <a href="#">1</a>
            <a href="#">2</a>
            <a href="#">3</a>
            <a href="#">4</a>
            <a href="#">5</a>
            <a href="#">&gt</a>
        </div>
    </div>
    </div>
</body>

</html>